<template>
    <div>
        <common-card
            title="今日交易用户数"
            :value="orderUser"
        >
        <template>
            <v-chart :options="getOptions()"></v-chart>
        </template>
        <template v-slot:footer>
            <span>退货率 </span>
            <span class="emphasis">{{returnRate}}</span>
        </template>
        </common-card>
    </div>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'
import commonDataMixin from '@/mixins/commonDataMixin' //引入inject数据
export default {
    mixins: [commonCardMixin,commonDataMixin], //引入有公共特性的改为mixin方式引入，减少共用代码的编写
    methods: { 
        getOptions() { 
            return this.orderUserTrend.length > 0 ? { 
                color: ['#3398DB'],//设置图表颜色
                xAxis: {
                    type: 'category',
                    data: this.orderUserTrendAxis,
                    show: false
                },
                yAxis: {
                    show: false
                },
                tooltip: { 

                },
                series: [{ 
                    name: '用户实时交易量',
                    type: 'bar',
                    data: this.orderUserTrend,
                    barWidth: '60%'//设计柱状图宽度为原来宽度的百分之六十
                }],
                grid: {
                    left: 0,
                    top: 0,
                    bottom: 0,
                    right: 0
                }
            } : null
        }
    }
};
</script>

<style lang="scss" scoped>

</style>